.spinner {
    --spinner-color: black;
    --spinner-bg-color: rgba(0, 0, 0, .2);
    --spinner-size: 16px;

    display: inline-block;
    height: var(--spinner-size);
    width: var(--spinner-size);

    &:after {
        content: " ";
        display: block;
        box-sizing: border-box;
        width: var(--spinner-size);
        height: var(--spinner-size);
        border-radius: 50%;
        border: calc(var(--spinner-size) / 5.5) solid var(--spinner-color);
        border-color: var(--spinner-bg-color) var(--spinner-bg-color) var(--spinner-color) var(--spinner-bg-color);
        animation: spinner 1.2s linear infinite;
    }
}

.message {
    composes: sr-only from '../styles/shared/a11y.module.css';
}

@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
